<template>
    <div>
        <template>
            <Button v-if="returnType === '1'" class="addBtn" type="success" style="margin-right: 10px" @click="returnCommodity">返回到创建商品</Button>
            <Button class="addBtn" type="primary" @click="addCategory">新增分类</Button>
        </template>
        <vxe-table
                resizable
                highlight-hover-row
                border="inner"
                ref="xTree"
                :data="tableData"
                :loading="tableLoading"
                :tree-config="{children: 'childrenList',expandAll: true}"
                @toggle-tree-expand="toggleExpandChangeEvent">
            <vxe-table-column field="name" title="商品名称" tree-node align="center"></vxe-table-column>
            <vxe-table-column title="操作" align="center">
                <template v-slot="{ row }">
                    <Button size="small" class="actionBtn" type="success" v-if="row.parent=='0'"
                            @click="addChildCategory(row)">新增子分类
                    </Button>
                    <Button size="small" class="actionBtn" type="info" @click="editCategory(row)">编辑
                    </Button>
                    <Button size="small" class="actionBtn" type="error" @click="deleteCategory(row.id)">删除
                    </Button>
                </template>
            </vxe-table-column>
        </vxe-table>
        <add-edit-category ref="addEdit" :isShow="modalView" :categoryTitle="CategoryTitle"
                           :type="typeParam" :parentId="parentId" :parent="parent" :formItemData ="formItemData"
                           @cancel="modelCancel" @submit="save"></add-edit-category>
    </div>
</template>

<script>
import { CategoryFindList, CategoryDelete } from '@/api/shop'
import AddEditCategory from './component/add-edit-category/index'

export default {
  components: { AddEditCategory },
  data () {
    return {
      tableData: [],
      tableLoading: false,
      loadingBtn: false,
      modalView: false,
      CategoryTitle: '',
      typeParam: '',
      parentId: '',
      parent: '',
      formItemData: {},
      returnType: this.$route.query.returnType
    }
  },
  methods: {
    returnCommodity () {
      if (this.$route.query.commodityId) {
        this.$router.push({
          path: '/shop/commodity/info',
          query: {
            id: this.$route.query.commodityId
          }
        })
      } else {
        this.$router.push({
          path: '/shop/commodity'
        })
      }
    },
    init () {
      this.tableLoading = true
      CategoryFindList().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.tableData = data.data
        }
      })
    },
    modelCancel () {
      this.modalView = false
    },
    save () {
      this.init()
      this.modalView = false
    },
    addCategory () {
      this.modalView = true
      this.CategoryTitle = '添加分类'
      this.typeParam = 'addDa'
      this.init()
    },
    addChildCategory (row) {
      this.modalView = true
      this.CategoryTitle = '添加子分类'
      this.typeParam = 'addChild'
      this.parentId = row.id
      this.init()
    },
    editCategory (row) {
      this.modalView = true
      this.CategoryTitle = '编辑分类'
      this.typeParam = 'editDa'
      this.parentId = row.id
      this.parent = row.parent
      this.formItemData = row
      this.init()
    },
    deleteCategory (val) {
      this.$Modal.confirm({
        title: '确认删除此菜单么？',
        content: '此操作会删除该菜单下全部菜单',
        loading: true,
        onOk: () => {
          let param = {
            id: val
          }
          CategoryDelete(param).then(ret => {
            let data = ret.data
            if (data.errcode === 0) {
              this.$Modal.remove()
              this.init()
              this.$Message.success({
                content: '删除成功！'
              })
            } else {
              this.$Modal.remove()
              this.$Message.error({
                content: '删除失败\n' + ret.data.errmsg
              })
            }
          })
        }
      })
    },
    toggleExpandChangeEvent ({ row, expanded }) {
      console.log('节点展开事件' + expanded, row)
    },
    getTreeExpansionEvent () {
      let treeExpandRecords = this.$refs.xTree.getTreeExpandRecords()
      this.$XModal.alert(treeExpandRecords.length)
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .addBtn {
        margin-bottom: 10px;
    }

    /deep/ .ivu-input {
        width: 70%;
    }

    .actionBtn {
        margin-left: 10px;
    }
</style>
